<!--
 * @Author: zhuxiaoyi
 * @Date: 2024-04-19 11:22:06
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2024-08-14 10:33:36
 * @Description: 
-->
<template>
    <div :class="`node-warp ${status}`" @contextmenu="onContextMenu($event, 'mac dark',)">
        <div :class="`node `">
            <div class="name">
                <el-avatar shape="square" style=" background: #fff;" :size="20" :fit="'contain'" :src="algorithm" />
                <p class="text-warp" :style="`margin-left: 5px; color:#1890ff;font-size:10px;`" :title="`${label}`">
                    <span style="font-size:12px">{{ label }}</span>
                </p>
            </div>
        </div>
        <div class="node-status">
            <el-text :style="`font-size: 10px; color:${color}`" effect="plain" size="small">状态：{{ des }}</el-text>
            <el-avatar class="status" style="margin-left: 10px; background: #fff;" :size="20" :src="icon" />
        </div>
    </div>
    <!--  <el-progress class="progress" striped v-if="status == 'running'" color="#e6a23c" :percentage="percentage"
        :show-text="true" :stroke-width="6" /> -->
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import success from '@/assets/icon/success.png'
import failed from '@/assets/icon/failed.png'
import running from '@/assets/icon/running.png'
import algorithm from '@/assets/icon/algorithm.png'
import pennding from '@/assets/icon/pennding.png'
import pause from '@/assets/icon/pause.png'
import { useRoute, useRouter } from "vue-router";
import HttpService from "@/api/api";
import { ElMessage, ElMessageBox } from "element-plus";

const route = useRoute()
export default defineComponent({
    name: 'ProgressNode',
    inject: ['getNode'],
    mounted() {
        const node = (this as any).getNode()
        console.log(node.data)
        this.label = node.data && node.data.label
        this.status = node.data && node.data.status
        this.id = node.id
        this.identifier = node.data &&node.data.identifier
        this.setStyleByStatus(this.status)
        setInterval(() => {
            if (this.percentage >= 99) {
                this.percentage = 0
            }
            this.percentage += 1
        }, 1000)
    },
    data() {
        return {
            percentage: 1,
            algorithm,
            status: "",
            label: "",
            color: "",
            icon: "",
            des: "",
            pause: "",
            identifier:""
        }
    },
    methods: {
        setStyleByStatus(status) {
            switch (status) {
                case 'pennding':
                    this.icon = pennding
                    this.color = '#999'
                    this.des = "待处理"

                    break;
                case 'running':
                    this.icon = running
                    this.color = '#E6A23C'
                    this.des = "执行中"
                    break;
                case 'success':
                    this.icon = success
                    this.color = '#52c41a'
                    this.des = "成功"
                    break;
                case 'failed':
                    this.icon = failed
                    this.color = '#ff4d4f'
                    this.des = "失败"
                case 'pause':
                    this.icon = pause
                    this.color = '#CBAEFF'
                    this.des = "暂停中"
                    break;
                default:
                    break;
            }
        },
        onContextMenu(e: MouseEvent, theme: string) {
            e.preventDefault();
            this.$contextmenu({
                items: [
                    {
                        label: "从当前节点开始执行",
                        icon: "icon-right-btn",
                        onClick: () => {
                            this.executeAlgorithmById(this.id)
                        },
                        disabled: false,

                    },
                    {
                        label: "复制当前节点",
                        icon: "icon-copy",
                        onClick: () => {
                            console.log(this.id)
                        },
                        disabled: true
                    },
                    {
                        label: "复制终端参数",
                        icon: "icon-code",
                        onClick: () => {
                            console.log(this.id)
                        },
                        disabled: true
                    },
                    {
                        label: "仅运行当前节点",
                        icon: "icon-zanting",
                        onClick: () => {
                            console.log(this.id)
                        },
                        disabled: true
                    },
                    {
                        label: "修改节点状态",
                        icon: "icon-change",
                        onClick: () => {
                            console.log(this.id)
                        },
                        disabled: false,
                        children: [
                            {
                                label: "待处理",
                                disabled: true,
                                icon: "icon-daizhihang",
                                onClick: () => {
                                    console.log(this.id)
                                },
                            },
                            {
                                label: "执行中",
                                disabled: true,
                                icon: "icon-zhihangzhong",
                                onClick: () => {
                                    console.log(this.id)
                                },
                            },
                            {
                                label: "执行成功",
                                disabled: false,
                                icon: "icon-chenggong",
                                onClick: () => {
                                    console.log(this.id)
                                },
                            },
                            {
                                label: "执行失败",
                                disabled: false,
                                icon: "icon-shibai",
                                onClick: () => {
                                    console.log(this.id)
                                },
                            },
                            {
                                label: "暂停中",
                                disabled: true,
                                icon: "icon-zanting1",
                                onClick: () => {
                                    console.log(this.id)
                                },
                            },
                        ]
                    },
                ],
                theme: theme,
                iconFontClass: 'iconfont',
                zIndex: 3,
                minWidth: 230,
                x: e.x,
                y: e.y
            });
        },
        executeAlgorithmById(nodeId) {
            console.log(this.$route.params.id)
            console.log(nodeId)
            let graphId = this.$route.params.id
            let params = {
                id: graphId,
                nodeId: nodeId
            };
            HttpService.algorithmManage.executeAlgorithmById(
                params,
                (res) => {
                    if (res.status == 200) {
                        ElMessage({
                            message: "流程开始执行 ",
                            type: "success",
                        });
                    } else {
                        console.log("流程执行失败" + res);
                    }
                },
                (error) => {
                    console.log(error);
                }
            );
        }
    }
})

</script>
<style lang="scss" scoped>
.node-warp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border: 1px solid #c2c8d5;
    border-radius: 4px;
    box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.06);
    padding: 0 10px;
    position: relative;

    .node-status {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.node {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    .name {
        display: flex;
        align-items: center;

        .text-warp {
            width: 160px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.node-warp.pennding {
    border-left: 4px solid #1890ff;
}

.node-warp.running {
    border-left: 4px solid #E6A23C;
}

.node-warp.success {
    border-left: 4px solid #52c41a;
}

.node-warp.failed {
    border-left: 4px solid #ff4d4f;
}

.node-warp.pause {
    border-left: 4px solid #CBAEFF;
}

.node-warp.running .status {
    animation: spin 1.5s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}
</style>

<style lang="scss">
.progress .el-progress__text {
    min-width: 20px !important;
    font-size: 10px !important;
    color: #E6A23C !important;
}
</style>